<template>
  <div class="form-setting-panel quality-setting">
    <!-- start 标题 -->
    <h3 class="form-setting-panel-title">{{field.displayName}}
      <el-tooltip placement="top" :content="$t('common.form.tip.qualityField.tips1')">
        <i class="iconfont icon-question"></i>
      </el-tooltip>
    </h3>   
    <!-- end 标题 -->

    <div class="form-design-warning">{{$t('common.form.tip.systemTemplateTips')}}</div>

    <!-- start 日期格式 -->
    <!-- <div class="form-setting-group form-setting-item mt24">
      <h4 class="form-item-title">
        {{$t('common.form.setting.date.settingDes1')}} 
        <el-tooltip placement="top" popper-class="form-msg-setting-tooltip">
          <div slot="content">
            <div class="tooltip">YYYY-MM-DD HH:MM:SS (2018-06-27 13:24:21)</div>
          </div>
          <i class="iconfont icon-question"></i>
        </el-tooltip>
      </h4>
      <div class="form-item-box form-date-type">
        <div class="form-setting-item" >
          <el-select v-model="dateType" @change="update(dateType, 'dateType', true)" :placeholder="$t('common.form.placeHolder.date.pla1')" style="width: 200px;">
            <el-option  v-for="item in pickerMapOption" :label="item.label" :value="item.format" :key="item.format"></el-option>
          </el-select>
        </div>
      </div>
    </div> -->
    <!-- end 日期格式 -->

    <!-- start 创建规则 -->
    <h3 class="form-setting-panel-title">{{$t('common.form.preview.qualityField.title1')}}</h3>   
    <div class="font-14 mt-4">{{$t('common.form.preview.qualityField.des1')}}</div>
    <div class="form-setting-panel-allow-product">
      <el-select v-model="field.setting.allowProduct" @change="changeApprove" :placeholder="$t('common.placeholder.select')">
        <el-option :label="$t('common.form.preview.qualityField.label4')" :value="0"></el-option>
        <el-option :label="$t('common.form.preview.qualityField.label5')" :value="1"></el-option>
        <el-option :label="$t('common.form.preview.qualityField.label6')" :value="2"></el-option>
      </el-select>
    </div>
    <approve-setting
      v-if="field.setting.allowProduct=='2'"
      :options="approveOptions"
      :approve-setting="field.setting.approveRule"
      @change="(setting) => changeApproveSetting(setting)"
    />
    <!-- end 创建规则 -->

    <!-- start 使用规则 -->
    <h3 class="form-setting-panel-title mt24">{{$t('common.form.preview.qualityField.title2')}}</h3>
    <el-checkbox v-model="field.setting.isFreeSparePartFee" :true-label="1" :false-label="0">{{$t('common.form.preview.qualityField.label7')}}</el-checkbox>
    <el-checkbox class="mt-12" v-model="field.setting.isFreeServiceFee" :true-label="1" :false-label="0">{{$t('common.form.preview.qualityField.label8')}}</el-checkbox>
    <!-- end 使用规则 -->

    <div class="form-setting-panel-default-quality">
      <i18n path="common.form.tip.qualityField.tips2" tag="span"> 
        <el-select place="data1" v-model="field.setting.defaultQuality" :placeholder="$t('common.placeholder.select')">
          <el-option :label="$t('common.base.warranty')" value="IN"></el-option>
          <el-option :label="$t('common.base.surrender')" value="OUT"></el-option>
        </el-select>
      </i18n>
    </div>

    <!-- start 字段值规则 -->
    <h3 class="form-setting-panel-title mt24">
      {{$t('common.form.preview.qualityField.title3')}}
      <el-tooltip placement="top" :content="$t('common.form.tip.qualityField.tips3')">
        <i class="iconfont icon-question"></i>
      </el-tooltip>
    </h3> 
    
    <div class="form-setting-group in-quality-rule">
      <div class="font-14 mb-4">
        <i18n path="common.form.tip.qualityField.tips4" tag="span"> 
          <button place="data1" type="button" class="btn-text form-select-logical-btn" @click="showLogicalModal('in')">{{$t('common.base.set')}}</button>
        </i18n>
      </div>
      <div class="quality-field-rule">
        <div v-if="inFieldRule.length > 0">
          <div v-for="(field, index) in inFieldRule" :key="index">{{field}}</div>
        </div>
        <div v-else class="quality-no-field-rule">{{$t('common.form.preview.qualityField.des2')}}</div>
      </div>
      <quality-rule-dialog
        :config='fieldArr'
        :form="inForm"
        @input='changeForm'
        @submit='submitParma'
        ref='inQualityRuleDialog'
      >
      </quality-rule-dialog>
    </div>

    <div class="form-setting-group">
      <div class="font-14">
        <i18n path="common.form.tip.qualityField.tips5" tag="span"> 
          <button place="data1" type="button" class="btn-text form-select-logical-btn" @click="showLogicalModal('out')">{{$t('common.base.set')}}</button>
        </i18n>
      </div>
      <div class="quality-field-rule">
        <div v-if="outFieldRule.length > 0">
          <div v-for="(field, index) in outFieldRule" :key="index">{{field}}</div>
        </div>
        <div v-else class="quality-no-field-rule">{{$t('common.form.preview.qualityField.des2')}}</div>
      </div>
      <quality-rule-dialog
        :config='fieldArr'
        :form="outForm"
        @input='changeForm'
        @submit='submitParma'
        ref='outQualityRuleDialog'
      >
      </quality-rule-dialog>
    </div>
    <!-- end 字段值规则 -->

    <!-- start 字段权限 -->
    <div class="form-setting-group form-setting-item">
      <h4 class="form-item-title">{{$t('common.base.fieldPermissions')}}</h4>
      <div class="form-item-box">
        <!-- 支持高级搜索 -->
        <form-search-setting :field="field" @input="update"></form-search-setting>
        <!-- 是否对客户可见 -->
        <form-visible-customer-setting :field="field" @input="update" v-if="isTaskModeForVisibleCustomer"></form-visible-customer-setting>
      </div>
    </div>
    <!-- end 字段权限 -->
  </div>
</template>

<script>
import SettingMixin from '@src/component/form/mixin/setting';
import QualityRuleDialog from './components/qualityRuleDialog.vue';
import FormSelectMixin from '@src/component/form/mixin/form.select';
import { settingProps } from '@src/component/form/components/props';
import * as FormUtil from '@src/component/form/util'
import * as util from '@src/modules/task/util/task'
import { isEmpty } from '@src/util/type'
import i18n from '@src/locales';
import { formatAddress } from 'pub-bbx-utils';
import pickerOption from '@src/component/form/components/FormDate/pickerOption';

export default {
  name: 'form-quality-setting',
  mixins: [SettingMixin, FormSelectMixin],
  props: {
    ...settingProps,
    /** 用于获取FormDesign实例 */
    getContext: Function
  },
  components: {
    QualityRuleDialog
  },
  data(){
    return {
      approveOptions: [
        {
          value: 'users',
          label: i18n.t('common.form.preview.qualityField.label9'),
        },
        {
          value: 'leader',
          label: i18n.t('common.form.preview.qualityField.label10'),
        },
        {
          value: 'userAdmin',
          label: i18n.t('common.form.preview.qualityField.label11'),
        }
      ],
      fieldArr: [],
      form: {},
      inForm: {},
      outForm: {},
      condition: 'in',
      inFieldRule: [],
      outFieldRule: [],
      dateType: this.field.setting.dateType || 'yyyy-MM-dd'
    }
  },
  computed: {
    /** 
    * @description 获取日期格式选择项
    */
    pickerMapOption() {
      return pickerOption;
    },
  },
  mounted () {
    this.initField();
  },
  methods: {
    initField() {
      let context = this.getContext();
      let arr = ['code', 'separator', 'attachment', 'info', 'location', 'autograph', 'relationCustomer', 'relationProduct', 'formula', 'related_task']
      this.fieldArr = context.value.filter(item => item.isSystem !== 1 && !(arr.includes(item.formType)))

      let inFieldRule = this.field.setting?.inFieldRule || [];
      let outFieldRule = this.field.setting?.outFieldRule || [];
      // 过滤掉被删除却被赋值掉字段
      inFieldRule = inFieldRule.filter(item => {
        return this.fieldArr.some(subItem => item.fieldName === subItem.fieldName)
      })
      outFieldRule = outFieldRule.filter(item => {
        return this.fieldArr.some(subItem => item.fieldName === subItem.fieldName)
      })
      this.inForm = this.formatRule(inFieldRule);
      this.outForm = this.formatRule(outFieldRule);
      this.inFieldRule = this.transferRuleFormat(inFieldRule);
      this.outFieldRule = this.transferRuleFormat(outFieldRule);
    },
    changeApprove(val) {
      if(val === 2) {
        this.field.setting.approveRule.level = this.field.setting.approveRule.level || 1
      }
    },
    transferRuleFormat(arr) {
      return arr.map(item => {
        const field = this.fieldArr.filter(subItem => subItem.fieldName === item.fieldName)
        if (field[0].formType === 'user') {
          return `${field[0].displayName}=${item.fieldValue.displayName}`
        }

        if (field[0].formType === 'address') {
          return `${field[0].displayName}=${formatAddress(item.fieldValue)}`
        }

        return `${field[0].displayName}=${item.fieldValue}`
      })
    },
    changeForm(val) {
      if (this.condition === 'in') {
        this.inForm = val
        const arr = this.formatSubmitParma(this.inForm)
        this.inFieldRule = this.transferRuleFormat(arr);
      } else {
        this.outForm = val
        const arr = this.formatSubmitParma(this.outForm)
        this.outFieldRule = this.transferRuleFormat(arr);
      }
    },
    formatSubmitParma(obj) {
      return Object.keys(obj).map(key => {
        if(isEmpty(obj[key])) return 
        return {
          fieldName: key,
          fieldValue: obj[key]
        }
      }).filter(item => item != undefined)
    },
    submitParma() {
      if (this.condition === 'in') {
        const arr = this.formatSubmitParma(this.inForm)
        this.$set(this.field.setting, 'inFieldRule', arr);
      } else {
        const arr = this.formatSubmitParma(this.outForm)
        this.$set(this.field.setting, 'outFieldRule', arr);
      }
    },
    /** 更新审批设置 */
    changeApproveSetting(setting) {
      this.$set(this.field.setting, 'approveRule', setting);
    },
    formatRule(form) {
      let obj = {}
      form.forEach(item => {
        obj[item.fieldName] = item.fieldValue
      });
      return obj
    },
    showLogicalModal(condition) {
      this.condition = condition;
      if (this.condition === 'in') {
        this.$refs.inQualityRuleDialog.ruleModalShow = true;
      } else {
        this.$refs.outQualityRuleDialog.ruleModalShow = true;
      }
    },
    update(value, prop, isSetting = false) {
      this.$emit('input', {value, prop, isSetting});
    }
  }
}
</script>
<style lang="scss" scoped>
.form-setting-panel {
  .mt24 {
    margin-top: 21px!important;
  }
  .font-14 {
    min-height: 22px;
    font-size: 14px;
    color: #595959;
    line-height: 22px;
  }
  .mt-4 {
    margin-top: 4px;
  }
  .mt-12 {
    margin-top: 12px;
  }
  .mb-4 {
    margin-bottom: 4px;
  }
  ::v-deep .el-checkbox__label {
    white-space: initial;
  }
}
.form-setting-panel-default-quality {
  font-size: 14px;
  color: #595959;
  line-height: 22px;
  margin-top: 16px;

  ::v-deep .el-select{
    width: 80px;
    .el-input{
      width: 80px;
      .el-input__inner{
        width: 80px;
      }
    }
  }
}
.form-setting-panel-allow-product {
  margin-top: 8px;
  ::v-deep .el-select{
    width: 300px;
    .el-input{
      width: 300px;
      .el-input__inner{
        width: 300px;
      }
    }
  }
}
.quality-field-rule {
  // display: flex;
  // flex-direction: column;
  font-size: 14px;
  color: #262626;
  line-height: 22px;
}
.quality-no-field-rule {
  height: 22px;
  font-size: 12px;
  color: #8C8C8C;
  line-height: 22px;
}
.quality-setting > h3{
  margin: 0 0 5px 0 !important;
}
</style>
